<template>
    <div class="city-list">
        <ul>
            <li v-for="name in lis" :key="name" @click.stop="$emit('changecity',name)">
                {{name}}
                <div class="del" v-if="isLocal" @click.stop="$emit('delcity',name)">
                    <i class="iconfont icon-guanbi-quxiao-guanbi"></i>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:{
        lis:[Array],
        isLocal:{
            type:Boolean,
            default:false
        }
    },
}
</script>

<style lang="less" scoped>
.city-list{
    background-color: #f5f5f5;
}
ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    li{
        width: 26%;
        margin-left: 16px;
        margin-top: 16px;
        border: 1px solid #ddd;
        line-height: 30px;
        text-align: center;
        border-radius: 3px;
        background-color: #fff;
        font-size: 14px;
        color: #333;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        .del{
            position: absolute;
            font-size: 18px;
            right: 3px;
            top: 0;
        }
    }
}
</style>